<template>
  <div style="width: 95%;margin: 0 auto;">
    <br>
    <div v-show="applyDetail">
        <group>
          <div>
            <card :header="{title:'详情'}">
              <div slot="content" class="card-demo-flex card-demo-content01">
                <div class="vux-1px-l vux-1px-r">
                  积分类别
                  <br/>
                  <span>{{category}}</span>
                </div>
                <div class="vux-1px-r">
                  申请积分
                  <br/>
                  <span>{{selfScore}}</span>
                </div>
                <div class="vux-1px-r">
                  申请月度
                  <br/>
                  <span>{{month}}</span>
                </div>
                <div style="height:100%;width:100%;">
                  <div style="vertical-align：middle; color:red">{{applyStatus}}</div>
                </div>
              </div>
            </card>
            <card :header="{title:'审核意见'}">
              <p slot="content" class="card-padding">{{suggestion}}</p>
            </card>
          </div>
          <br>
          <div v-show="Back" class="btn_wrap">
            <flexbox>
              <flexbox-item>
                <x-button type="primary" link="/tabbar/myapply">返 回</x-button>
              </flexbox-item>
            </flexbox>
          </div>
          <div v-show="Resubmit" class="btn_wrap">
            <flexbox>
              <flexbox-item>
                <x-button type="primary" @click.native="reSubmitScroe()">重新提交</x-button>
              </flexbox-item>
            </flexbox>
          </div>
        </group>
    </div>
    <div v-show="applyShow">
      <template>
        <div>
          <group label-width="4.5em" label-margin-right="2em" label-align="right">
            <cell title="积分类别" @click.native="detailShow()"><div style="color:blue">{{category}}</div></cell>
            <datetime format="YYYY-MM" title="积分月度" v-model="time" value-text-align="left"></datetime>
            <x-input title="分&emsp;&emsp;&nbsp;数" placeholder="必填" v-model="score"></x-input>
            <x-textarea title="申请描述" placeholder="请填写详细信息" :show-counter="false" :rows="3" v-model="description"></x-textarea>
          </group>
          <br>
          <div style="padding:15px;">
            <flexbox>
              <!-- <flexbox-item>
                <x-button @click.native="PreviousStep()" type="primary">上一步</x-button>
              </flexbox-item> -->
              <flexbox-item>
                <x-button @click.native="submitScore()" type="primary">提 交</x-button>
              </flexbox-item>
            </flexbox>
          </div>
          <toast v-model="status" type="text">操作成功</toast>
          <toast v-model="errorTosat" type="text">操作失败</toast>
        </div>
      </template>
    </div>
    <div v-show="applyFinish">
      <msg title="申请成功" description="点击我的申请可以查看申请状态" icon="success"></msg>
      <div style="padding:15px;">
            <flexbox>
              <flexbox-item>
                <x-button link="/work" type="primary">完 成</x-button>
              </flexbox-item>
              <flexbox-item>
                <x-button link="/tabbar/myapply" type="primary">我的申请</x-button>
              </flexbox-item>
            </flexbox>
          </div>
    </div>
    <!-- <div v-else><span>暂无新申请的额外积分</span></div> -->
  </div>
</template>

<script>
import { Group, Cell, CellFormPreview, Confirm, XButton, XHr, Card, FlexboxItem, Flexbox, Divider, Toast, Datetime, XTextarea, XInput, Msg} from 'vux'

export default {
  components: {
    Group,
    Cell,
    CellFormPreview,
    Confirm,
    Card,
    XButton,
    XHr,
    FlexboxItem,
    Flexbox,
    Divider,
    Toast,
    Datetime,
    XTextarea, 
    XInput,
    Msg
  },
  data () {
    var currentDate = new Date()
    var routerParams = this.$route.query.scoreId
    var currentTimeStr = currentDate.getFullYear() + '-' + (currentDate.getMonth() + 1)
    return {
      disable: [],
      name: '',
      staffId: '',
      month: '',
      category: '',
      suggestion: '',
      selfScore: '',
      status: '',
      detail: '',
      description: '',
      score: '',
      time: currentTimeStr,
      scoreId: routerParams,
      applyStatus: '',
      showContent: [],
      dateList: [],
      status: false,
      errorTosat: false,
      Resubmit: false,
      Back: true,
      applyShow: false,
      applyFinish: false,
      applyDetail: true
    }
  },
  mounted: function () {
    this.getScoreInfo()
  },
  methods: {
    getScoreInfo: function () {
      var self = this
      self.$ajax({
        method: 'get',
        url: '../wx/userAdditional/search/detail',
        params: {
          scoreId: self.scoreId
        }
      })
      .then(function (res) {
        var scoreDetail = res.data[0]
        self.month = scoreDetail.month
        self.category = scoreDetail.category
        self.selfScore = scoreDetail.selfScore
        self.suggestion = scoreDetail.suggestion
        self.applyStatus = scoreDetail.status
        self.detail = scoreDetail.scoreDetail
        self.staffId = scoreDetail.staffId
        self.name = scoreDetail.userName
        if (self.suggestion == null ) {
          self.suggestion = '暂无'
        }
        if (scoreDetail.scoreStatus == 0) {
          self.Resubmit = true
          self.Back = false
        }
      })
      .catch(function (err) {
        console.log(err)
      })
    },
    detailShow: function () {
      var text = this.detail
      this.$vux.alert.show({
        title: '详情信息',
        content: text
      })
    },
    getdate: function () {
        this.dateList = this.time.split('-')
    },
    reSubmitScroe () {
      this.applyShow = true
      this.applyDetail = false
    },
    /*----提交分数----*/
    submitScore: function () {
      var self = this
      self.getdate()
      self.$ajax({
        method: 'post',
        url: '../wx/userAdditional/save/'+self.staffId,
        data: {
          selfScore: self.score,
          additionalScoreId: self.scoreId,
          description: self.description,
          status: '1',
          scoreType: 'TM',
          month: self.dateList[1]
        }
      })
      .then(function (res) {
        self.status = res.data
        if (!self.status) {
          self.errorTosat = true
        }
        self.applyDetail = false
        self.applyShow = false
        self.applyFinish = true
      })
      .catch(function (err) {
        console.log(err)
        self.errorTosat = true
      })
    },
  }
}

</script>

<style lang="less">
.card-demo-flex {
  display: flex;
}
.card-demo-content01 {
  padding: 10px 0;
}
.card-padding {
  padding: 15px;
}
.card-demo-flex > div {
  flex: 1;
  text-align: center;
  font-size: 12px;
}
.card-demo-flex span {
  color: #f74c31;
}
.card-padding {
  padding: 15px;
}
.btn_wrap {
  padding: 0 1rem;
  margin-top: 2rem;
}
.detial-form {
    padding: 10px 15px;
    font-size: .9em;
    text-align: right;
    color: #999999;
    line-height: 2;
}
.detial-form__label {
    float: left;
    margin-right: 1em;
    min-width: 4em;
    color: #999999;
    text-align: justify;
    text-align-last: justify;
}
.detial-form__value {
    display: block;
    overflow: hidden;
    word-break: normal;
    word-wrap: break-word;
}
.grid-center {
  display: block;
  text-align: center;
  color: #666;
}
</style>
